<template>
  <div class="fillcontain userInfoList">
    <div class="filter-container">
      <el-input
        placeholder="标题"
        v-model="listQuery.title"
        style="width:200px"
        clearable
      ></el-input>
      <el-select v-model="listQuery.state" clearable>
        <el-option
          v-for="item in stateOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-date-picker
        v-model="daterangeValue"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="起始时间"
        end-placeholder="结束时间"
        value-format="yyyy-MM-dd"
        @change="daterangeChanged"
        :picker-options="daterangePickerOptions"
      ></el-date-picker>

      <el-button type="primary" @click="handleFilter">查询</el-button>
      <el-button type="warning" @click="resetFilter">重置</el-button>
      <el-button type="warning" @click="addMessage">添加</el-button>
    </div>

    <div class="app-container calendar-list-container">
      <el-table
        :data="list"
        border
        fit
        highlight-current-row
        v-loading="listLoading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        ref="sort"
        @sort-change="sortChange"
      >
        <el-table-column align="center" label="消息ID">
          <template slot-scope="scope">
            <span>{{ scope.row.message_id }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="推送说明">
          <template slot-scope="scope">
            <span>{{ scope.row.desc }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="创建时间"
          sortable
          prop="create_time"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.create_time }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="推送目标">
          <template slot-scope="scope">
            <span v-html="receiver(scope.row)"></span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="标题">
          <template slot-scope="scope">
            <span>{{ scope.row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="内容">
          <template slot-scope="scope">
            <span>{{ scope.row.content }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="跳转">
          <template slot-scope="scope">
            <span>{{ scope.row.type == 2 ? "首页" : scope.row.link }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="推送时间"
          sortable
          prop="push_time"
          @sort-change="sortChange"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.push_time }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="数据统计">
          <template slot-scope="scope">
            <span>发送数量:{{ scope.row.send_num }} <br/>点击数量:{{scope.row.click_num}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作人">
          <template slot-scope="scope">
            <span>{{ scope.row.operator }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              @click="handleView(scope.row)"
              v-if="scope.row.state === 1"
              >详情</el-button
            >
            <template v-if="scope.row.state === 0">
              <el-button
                type="primary"
                size="small"
                @click="handleDelete(scope.row)"
                >删除</el-button
              >
              <el-button
                type="primary"
                size="small"
                @click="handleEdit(scope.row)"
                >编辑</el-button
              >
            </template>
          </template>
        </el-table-column>
      </el-table>
    </div>

   <TablePagination
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
      :current-page="listQuery.page"
      :limit="listQuery.limit"
      :total="total"
      :loading="listLoading"
    >
    </TablePagination>

    <!--编辑消息弹框-->
    <Modal-Push-Message
      :visible="modalVisible"
      @close="
        modalVisible = false;
        modalDisabled = false;
      "
      :params="rowData"
      @confirm="handleConfirm"
      :disabled="modalDisabled"
    ></Modal-Push-Message>
  </div>
</template>

<script>
import DATEPICKER_OPTIONS from "@/config/datepickerOptions";
import ModalPushMessage from "./components/ModalPushMessage";
import TablePagination from "@/components/TablePagination";
export default {
  components: { ModalPushMessage, TablePagination },
  data() {
    return {
      list: null,
      total: null,
      listLoading: true,
      stateOptions: [
        {
          value: 0,
          label: "未发出"
        },
        {
          value: 1,
          label: "已发出"
        }
      ],
      listQuery: {
        offset: 0,
        limit: 20,
        title: "",
        startTime: null,
        endTime: null
      },
      daterangePickerOptions: DATEPICKER_OPTIONS.daterangePickerOptions,
      daterangeValue: "",
      modalVisible: false,
      $msg: null,
      rowData: {},
      modalDisabled: false, //禁用表单
      
    };
  },
  created() {
    this.getList();
  },
  methods: {
    receiver(row) {
      if (row.receive_type === 0) {
        return "所有用户";
      } else if (row.receive_type === 2) {
        return (
          row.app_channel +
          "<br/>" +
          row.app_package_name +
          "<br/>" +
          row.app_version
        );
      } else {
        return row.receive_value;
      }
    },
    getList() {
      this.listLoading = true;
      this.$get("push_message/cfg", this.listQuery).then(resp => {
        this.list = resp.data.cfgs;
        this.total = resp.data.count;
        this.listLoading = false;
      });
    },
    sortChange: function(column, prop, order) {
      this.listQuery.orderBy = column.prop;
      this.listQuery.orderType = column.order == "ascending" ? "asc" : "desc";
      this.getList();
    },

    //删除
    handleDelete(row) {
      this.$confirm("确定删除该消息吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.deleteItem(row);
      });
    },
    deleteItem(row) {
      this.$msg = this.$message({
        duration: 0,
        message: "删除中..."
      });
      this.$del("push_message/cfg/" + row.message_id)
        .then(resp => {
          if (resp) {
            this.$msg.close();
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.getList();
          }
        })
        .catch(err => {
          this.$message({
            message: err.data.data.description,
            type: "error"
          });
        });
    },
    //添加
    addMessage() {
      this.modalDisabled = false;
      this.modalVisible = true;
      this.rowData = {};
    },
    //编辑
    handleEdit(row) {
      this.modalDisabled = false;
      this.modalVisible = true;
      this.rowData = row;
    },
    //查看
    handleView(row) {
      this.modalDisabled = true;
      this.modalVisible = true;
      this.rowData = row;
    },
    handleConfirm() {
      this.getList();
    }
  }
};
</script>
